<template>
  <div class="audit">
    <!-- 按钮开始 -->
    <div class="button">
      <el-button size='small' type="primary"  class="d" @click="moreshanH">批量删除</el-button>
      <el-input size='small' placeholder="请输入内容" v-model="list.keywords" class="wenzi"></el-input>
      <el-button  @click="findH" size='small' type="primary">查询</el-button>
    </div>
    <!-- 按钮结束 -->
    
    <!-- 表格开始 -->
      <el-table
     
      size='small'
        ref="multipleTable"
        :data="informations"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
    <!--  type='index' 序号自增 -->
        <el-table-column
         
          type='index'
          label="序号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="comment"
          label="评论内容"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="userId"
          label="评论人编号"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="articleId"
          label="咨询编号"
          show-overflow-tooltip>
          </el-table-column>
        <el-table-column
          prop="status"
          label="评论状态"
          show-overflow-tooltip>
          </el-table-column>
        <el-table-column
          label="评论时间"
          width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
          <el-table-column
          prop=""
          label="操作"
          show-overflow-tooltip>

          <template slot-scope="scope">
      <!-- @click="passH(scope.row.xx)绑定事件 -->
                   <el-button type="text" @click="shanH(scope.row.id)" style="color:#ffc93a">删除</el-button>             
              </template>  

          </el-table-column>
      </el-table>
    <!-- 表格结束-->
    <!-- 分页开始 -->
    <!-- 分页开始 -->
    <div class="page">
      <el-pagination
      size='small'
          @current-change="changeHandler"
          :page-sizes="[2, 5, 10, 15,20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="2">
        </el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
export default {
 data(){
   return{
    //  表格数据相关0-
     list:{
        page:1,
        pageSize:20
      },
      ids:[]
   }
 },
 computed:{
  ...mapState('audit',['informations','total'])
 },
 methods:{
  ...mapActions('audit',['findAllInformation','auditShan','auditMoreShan']),

  //分页
    changeHandler(page){
      this.list.page = page
      this.findAllInformation(this.list)
    },

  //查询
   // findAllTrues里定义的
    findH(){
      this.findAllInformation(this.list)
    },

  // 删除
    // 按钮click绑定的
     shanH(id){
        let params = {
          id
        }
      // auditShan js里定义的
        this.auditShan(params).then(res =>{
          if(res.status === 200){
      // findAllInformation里定义的
            this.findAllInformation(this.list)
            this.$message({
              type:'success',
              message: res.message
            })
          }else {
              this.$message({
              type:'error',
              message: res.message
            })
          }
        })
        },

  // 批量删除
    // 按钮click绑定的
     moreshanH(ids){
        
     
      // auditMoreShan js里定义的
        this.auditMoreShan(this.ids).then(res =>{
          if(res.status === 200){
      // findAllInformation里定义的
            this.findAllInformation(this.list)
            this.$message({
              type:'success',
              message: res.message
            }) 
            
          }else {
              this.$message({
              type:'error',
              message: res.message
            })
          }
        })
        },

 },
 created(){
    this.findAllInformation(this.list)
 }
}
</script>



<style scoped>
.button {
  display: flex;
}
.wenzi{
  width: 190px;
  padding-left: 20px;
  padding-right: 20px;
}
.d {
  background-color:#ff4949;
}
.page {
  float: right;
}
</style>